<template>
  <div class="home">
    <div class="stage">
      <div class="heart" :class="aixin ? 'is-active' : ''"></div>
    </div>
    <div class="head">
      <div class="head-top">
        <svg class="icon index-icon" aria-hidden="true" @click="goToAside()">
          <use xlink:href="#icon-cebianlanzhankai"></use>
        </svg>
        <div class="top-right-corner">
          <svg
            class="icon index-icon"
            aria-hidden="true"
            @click="goTosSearch()"
          >
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
      </div>
      <div class="photo-list">
        <div class="slogan">
          <p style="font-size: 30px; font-weight: bold">ADOPT</p>
          <p style="font-size: 22px; font-weight: bold">DON'T SHOP</p>
          <span style="font-size: 12px; margin-top: 10px"
            >Come and join us</span
          >
        </div>
      </div>
      <!-- <ul class="type-list">
          <li class="type" v-for="(item,index) in kind" :key="index" @click="selectKind(item.name,index)">
            <img :src="item.img" alt="" class="icon index-icon">
            <span>{{item.name}}</span>
          </li>
        </ul> -->
    </div>
    <div class="adopt-agency">
      <div class="adopt-agency-title">
        <p class="title">领养机构</p>
        <svg
          class="icon index-icon"
          aria-hidden="true"
          @click="gotoAgencyList()"
        >
          <use xlink:href="#icon-qita1"></use>
        </svg>
      </div>
      <ul class="agency-list">
        <li
          class="agency-info"
          v-for="(agency, index) in agencyList.slice(0, 4)"
          :key="index"
        >
          <div class="agency" @click="gotoAgency(agency.id)">
            <img :src="JSON.parse(agency.img)[0]" alt="" class="agency-img" />
            <div class="agency-basic-info">
              <div class="agency-title">
                <p>{{ agency.name }}</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="pet-star">
      <p class="title recommend">推选</p>
      <div class="pet-list">
        <div
          class="pet-info"
          v-for="(pet, index) in petList.slice(0, 6)"
          :key="index"
        >
          <div class="pet" @click="gotoPet(pet.id,pet)">
            <img :src="JSON.parse(pet.profile)[0]" alt="" class="pet-img" />
            <div class="pet-basic-info">
              <div class="pet-title">
                <p>{{ pet.pname }}</p>
                <svg
                  class="icon index-icon gender"
                  aria-hidden="true"
                  v-if="pet.gender === '雌'"
                >
                  <use xlink:href="#icon-nv"></use>
                </svg>
                <svg
                  class="icon index-icon gender"
                  aria-hidden="true"
                  v-if="pet.gender === '雄'"
                >
                  <use xlink:href="#icon-nan"></use>
                </svg>
              </div>
              <p>年龄：{{ pet.age }}</p>
              <p>{{ pet.reason }}</p>
              <p>来自 {{ pet.mechanismName ? pet.mechanismName: '' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getpetInfo, getMechanismList, updateLike, getType } from "@/api.js";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      aixin: false,
      like: false,
      petList: [],
      agencyList: [],
      kind: [],
    };
  },
  created() {
    this.getPetInfo();
    this.getAgencyInfo();
    this.getKind();
  },
  watch: {
    aixin: {
      handler(newVal) {
        if (newVal) {
          setTimeout(() => {
            this.aixin = false;
          }, 1200);
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getKind() {
      try {
        const data = await getType({});
        if (!data.success) return this.$message.error("系统繁忙");
        this.kind = data.data;
      } catch (e) {
        console.log(e);
      }
    },
    //点赞
    async dianzan(index, status, aid) {
      if (status === 1) {
        this.agencyList[index].status = 2;
        this.aixin = false;
      } else if (status === 2) {
        this.agencyList[index].status = 1;
        this.aixin = true;
      }
      let params = {
        aid,
        user_id: JSON.parse(localStorage.getItem("user")),
        status: this.agencyList[index].status,
      };
      const { data } = await updateLike(params);
      console.log(data);
    },
    //跳转到种类页页面
    selectKind(name, index) {
      this.$router.push(`/kind/${name}/${index}`);
    },
    gotoOther() {
      this.$router.push("/kind");
    },
    gotoAgencyList() {
      this.$router.push("/agency_list");
    },
    goToAside() {
      this.$router.push("/aside");
    },
    getPetInfo() {
      getpetInfo({ 'isTui': 'true' }).then((res) => {
        this.petList = res.data;
      });
    },
    async getAgencyInfo() {
      // let params = {user_id:JSON.parse(localStorage.getItem('user'))}
      await getMechanismList().then((res) => {
        this.agencyList = res.data;
      });
    },
    goTosSearch() {
      this.$router.push("/search");
    },
    //跳转到机构详情页
    gotoAgency(aid) {
      this.$router.push("/agency/" + aid);
    },
    gotoPet(id,data) {
      console.log(data);
      let obj = { 
        id: data.mechanismId,
        name: data.mechanismName,
        petImg: JSON.parse(data.profile)[0]
      }
      this.$router.push(`/pet/${id}?data=${JSON.stringify(obj)}`);
    },
    gotoSearch() {
      this.$router.push("/search");
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  overflow-y: auto;

  .stage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    .heart {
      width: 100px;
      height: 100px;
      background: url("https://cssanimation.rocks/images/posts/steps/heart.png")
        no-repeat;
      background-position: 0 0;
      opacity: 0;
    }

    .is-active {
      opacity: 1;
      background-position: -2800px 0;
      transition: background-position 1s steps(28);
    }
  }
  .head {
    .head-top {
      display: flex;
      justify-content: space-between;
      .top-right-corner {
        display: flex;
        align-items: center;
      }
    }
    .photo-list {
      position: relative;
      width: 100%;
      height: 4.3rem;
      background: url("../assets/images/pet/cat22.jpg") no-repeat -4.5rem;
      border-radius: 0.25rem;
      margin: 0.25rem 0;
      .slogan {
        position: absolute;
        color: white;
        display: flex;
        flex-direction: column;
        padding: 0.25rem;
        bottom: 0;
      }
    }
    .type-list {
      display: flex;
      justify-content: space-around;
      li {
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    }
  }
  .adopt-agency {
    margin: 0.25rem 0px;
    width: 100%;
    .adopt-agency-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .agency-list {
      width: 100%;
      display: flex;
      overflow-y: hidden;
      .agency {
        width: 4rem;
        height: 4rem;
        margin-right: 0.25rem;
        flex-shrink: 0;
        .agency-img {
          width: 4rem;
          height: 3rem;
          border-radius: 0.15rem;
        }
        .agency-basic-info {
          padding: 0.25rem 0.15rem;
          font-size: 0.3rem;
          color: #a09ea0;
          .agency-title {
            font-size: 0.4rem;
            color: #38383b;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            height: 0.5rem;
            @keyframes hovermove {
              from {
                height: 0;
              }
              to {
                height: 1.3em;
              }
            }
            .love {
              height: 1.3em;
              animation: hovermove 0.3s;
            }
            .grey {
              height: 1.5em;
              margin-top: -0.04rem;
              animation: hovermove 0.3s;
            }
          }
        }
      }
    }
  }
  .pet-star {
    position: relative;
    overflow: hidden;
    .recommend {
      position: absolute;
      background: white;
      height: 1rem;
      width: 100%;
    }
    .pet-list {
      margin-top: 1rem;
      height: 10rem;
      overflow-y: auto;
      overflow-x: hidden;
      .pet {
        display: flex;
        height: 4rem;
        margin-bottom: 0.4rem;
        .pet-img {
          border-radius: 7%;
          width: 4.3rem;
        }
        .pet-basic-info {
          color: #a09ea0;
          font-size: 0.3rem;
          padding: 0.25rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .pet-title {
            color: #38383b;
            font-size: 0.4rem;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            .gender {
              width: 0.5rem;
              height: 1.5em;
            }
          }
        }
      }
    }
  }
  .index-icon {
    width: 0.8rem;
  }
  .title {
    font-size: 0.45rem;
    font-weight: bold;
    color: #333333;
  }
}
</style>
